<template>
    <div class="Rating" :value='value'>
      <ul class="Rating-list">
        <li v-for="s in 5" @click="changeRate(s)">
          <img :src="s <= star ? rateOn : rateOff" class="Rating-list-item">
        </li>
      </ul>
      <!--显示用户自定义内容-->
      <slot></slot> 
    </div>
</template>

<script>
    export default {
        name: "rate",
        props: { 
          value: {
              type:Number,
              default:0 
          }
        },
        data(){
            return{
                star: this.value,
                rateOn: require("../assets/rate-on.png"),
                rateOff: require("../assets/rate-off.png"),
            }
        },
        mounted(){
            
        },
        methods:{
           changeRate(s){
             this.star = s;
             this.$emit('input', s);
           }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .Rating{
      display: inline-block;
      &-list{
        width: rpx(360);
        display: flex;
        justify-items: center;
        li{
          margin-right: rpx(30);
        }
        &-item{
          width: 100%;
        }
      }
    }
</style>
